<template>
  <cloudPage :isLoading="isLoading">
    <cloudHeader slot="gHeader" background="#1B1B2B">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff; font-size: 36rpx"
          >{{ $t("mf.my.my_team_sons") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"></view>
      </view>
    </cloudHeader>
    <view class="container" v-if="!isLoading" :style="{ top: top + 'rpx' }">
      <graceNavBar
        :items="tabs"
        :isCenter="true"
        fontSize="30rpx"
        activeColor="#FFFFFF"
        color="rgba(255,255,255,0.6)"
        activeLineBg="linear-gradient(150deg, #FEE8B2 0%, #FFDB82 100%)"
        activeLineRadius="3rpx"
        activeDirection="center"
        :currentIndex="currentIndex"
        @change="navChange"
      ></graceNavBar>

      <view class="accordion">
        <view
          class="grace-accordion-items"
          v-for="(user, index) in userTeam.data"
          :key="index"
        >
          <view
            class="grace-accordion-title"
            @tap="changeAccordion"
            :id="'grace-accordion-' + index"
            hover-stay-time="100"
            hover-class="grace-opacity"
          >
            <text class="title"
              >{{ type == 0 ? "A" : "B" }}{{ index + 1
              }}{{ $t("mf.my.my_customer") }}</text
            >
            <text
              class="grace-icons icon-arrow-up switch-arrow"
              v-if="accordionActive == 'grace-accordion-' + index"
            ></text>
            <text
              class="grace-icons icon-arrow-down switch-arrow"
              v-else
            ></text>
          </view>
          <view
            :class="[
              'grace-accordion-body',
              accordionActive == 'grace-accordion-' + index
                ? 'grace-accordion-show'
                : 'grace-accordion-hide',
            ]"
          >
            <view class="accordion-content">
              <view class="tr grace-flex grace-flex-vcenter">
                <view class="title">{{ $t("mf.my.my_account") }}</view>
                <view class="text">{{ user.username }}</view>
              </view>
              <view class="tr grace-flex grace-flex-vcenter">
                <view class="title">UID</view>
                <view class="text">{{ user.show_user_id }}</view>
              </view>
              <view class="tr grace-flex grace-flex-vcenter">
                <view class="title">{{ $t("mf.my.my_power") }}</view>
                <view class="text">{{ user.user_yeji }}USDT</view>
              </view>
              <view class="tr grace-flex grace-flex-vcenter">
                <view class="title">{{ $t("mf.my.grade") }}</view>
                <view class="text">{{ user.total.user.grade_text }}</view>
              </view>
              <view class="tr grace-flex grace-flex-vcenter">
                <view class="title">{{ $t("mf.my.my_team_num") }}</view>
                <view class="text"
                  >{{ user.total.team_num }}{{ $t("mf.my.unit_ren") }}</view
                >
              </view>
              <view class="tr grace-flex grace-flex-vcenter">
                <view class="title">{{ $t("mf.my.my_add_num") }}</view>
                <view class="text"
                  >{{ user.total.add_team_num }}{{ $t("mf.my.unit_ren") }}</view
                >
              </view>
              <view class="tr grace-flex grace-flex-vcenter">
                <view class="title">{{ $t("mf.my.my_team_yeji") }}</view>
                <view class="text">{{ user.total.team_yeji }}USDT</view>
              </view>
              <view class="tr grace-flex grace-flex-vcenter">
                <view class="title">{{ $t("mf.my.my_team_yeji") }}</view>
                <view class="text">{{ user.total.my_add_yeji }}USDT</view>
              </view>
              <view class="tr grace-flex grace-flex-vcenter">
                <view class="title">{{ $t("mf.my.my_group") }}</view>
                <view class="text grace-flex">
                  <view
                    class="item"
                    v-for="(grade, g_index) in user.grade_group"
                    :key="g_index"
                    >{{ g_index }}：{{ grade }}{{ $t("mf.my.unit_ren") }}</view
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <graceLoading
        :loadingType="
          loading['xhhx.shop.user_team'] ? 1 : userTeam.has_next_page ? 0 : 2
        "
      ></graceLoading>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      isLoading: false,
      invitation: null,
      tabs: [],
      currentIndex: 0,
      accordionActive: "grace-accordion-0",
      type: 0, //0:A区 1:B区
    };
  },
  methods: {
    ...mapActions("mf/my", ["loadUserTeam", "extractAb"]),
    async navChange(index) {
      if (this.currentIndex == index) return;

      this.currentIndex = index;
      this.type = index;
      this.accordionActive = "";
      await this.getTeam();
      this.accordionActive = "grace-accordion-0";
    },
    changeAccordion(e) {
      var accordionIndex = e.currentTarget.id;
      if (this.accordionActive == accordionIndex) {
        accordionIndex = "";
      }
      this.accordionActive = accordionIndex;
    },
    async getTeam() {
      await this.loadUserTeam({ type: this.type });
    },
  },
  computed: {
    ...mapGetters("mf/my", ["userTeam", "userAb"]),
  },
  async onLoad() {
    this.isLoading = true;

    this.tabs = [];
    const ab = await this.extractAb();
    this.tabs.push(this.$t("mf.my.my_dep_a") + ":" + ab.dep_a);
    this.tabs.push(this.$t("mf.my.my_dep_b") + ":" + ab.dep_b);

    await this.getTeam();
    this.isLoading = false;
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 129rpx 20rpx 0;
  box-sizing: border-box;
}

.accordion {
  padding: 20rpx;
}

.accordion .grace-accordion-items {
  margin-top: 30rpx;
}
.accordion .grace-accordion-items .grace-accordion-title {
  height: 93rpx;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px 12px 0px 0px;
}

.accordion .grace-accordion-items .grace-accordion-title .switch-arrow {
  color: #999999;
}

.accordion .grace-accordion-items .title {
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 42rpx;
}

.accordion .grace-accordion-items .accordion-content {
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  border-bottom: unset;
}
.accordion-content .tr {
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}
.accordion-content .tr .title {
  width: 200rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 40rpx;
  text-align: center;
}
.accordion-content .tr .text {
  padding: 24rpx 60rpx;
  border-left: 1rpx solid rgba(255, 255, 255, 0.1);
  width: 390rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 40rpx;
  flex-wrap: wrap !important;
}
.accordion-content .tr .text .item {
  width: 180rpx;
  text-align: left;
}

@import "../../graceUI/animate.css";
.grace-accordion-show {
  height: auto;
  animation: fadeIn 300ms linear;
}
.grace-accordion-hide {
  height: 0;
  animation: fadeOut 300ms linear;
}
</style>
